import React, { useEffect } from 'react';
import { Input, Modal } from 'antd';
import useSyncState from '../hooks/useSyncState';
import styled from '@emotion/styled';
import { useStream } from '../Context/StreamContext';
import { formatScends } from '@/utils';
import { useTranslation } from 'react-i18next';

interface IRecordTitleProps {
	recordTime: number;
}

interface IRecordPointModalProps {
	modalVisiable: boolean;
	submitPoint: () => void;
	setModalVisiable: (status: boolean) => void;
}

const RecordTextArea = styled(Input.TextArea)`
	height: 92px !important;
	resize: none;
	background: none;
`;

const ErrorMessage = styled.p`
	color: #f8646a;
`;

const RecordTitle = (props: IRecordTitleProps) => {
	const { t } = useTranslation();
	const { recordTime } = props;
	return (
		<div className="record-point-title">
			<p className="text">
				<span>{t('recording-mark')}</span>
				<span className="time">{formatScends(recordTime)}</span>
			</p>
			<p className="tips">{t('locate-with-video-marker')}</p>
		</div>
	);
};

const RecordPointModal = (props: IRecordPointModalProps) => {
	const { t } = useTranslation();
	const { modalVisiable, setModalVisiable, submitPoint } = props;
	const { recordPoint, setRecordPoint } = useStream();
	const [pointText, setPointText] = useSyncState<string>('');
	const [errorText, setErrorText] = useSyncState<string>('');

	const submit = () => {
		if (pointText().trim() === '') {
			setErrorText('* ' + t('marker-content-not-empty'));
			return;
		}
		setRecordPoint({ ...recordPoint(), content: pointText().trim() });
		setErrorText('');
		setPointText('');
		setModalVisiable(false);
		submitPoint();
	};

	useEffect(() => {
		setErrorText('');
		setPointText('');
	}, [modalVisiable]);

	useEffect(() => {
		if (pointText().trim() !== '') {
			setErrorText('');
		} else {
			setErrorText('* ' + t('marker-content-not-empty'));
		}
	}, [pointText()]);

	return (
		<div className="record-modal-contianer">
			<Modal
				title={RecordTitle({ recordTime: recordPoint().timePoint })}
				open={modalVisiable}
				width={450}
				centered
				okText={t('confirm')}
				cancelText={t('cancel')}
				onOk={submit}
				onCancel={() => {
					setModalVisiable(false);
				}}
			>
				<div className="record-text-area-container">
					<RecordTextArea
						placeholder={t('input-mark-content') as string}
						bordered={false}
						maxLength={100}
						showCount
						style={{ resize: 'none' }}
						value={pointText()}
						onChange={e => setPointText(e.target.value)}
					/>
				</div>
				<ErrorMessage>{errorText()}</ErrorMessage>
			</Modal>
		</div>
	);
};

export default RecordPointModal;
